/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Grid, Input, Button, Select, DatePicker } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { observer, inject } from 'mobx-react';

const { Row, Col } = Grid;
@inject('dictstore')
@observer
export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    let search = {}
    let storage = sessionStorage.getItem(this.props.match.url)
    if(storage) {
      search = JSON.parse(storage).search
    }
    this.state = {
      value: search,
    };
  }

  filter() {
    this.props.filter(this.state.value)
  }

  reset = () => {
    let that = this;
    this.setState({
      value: {}
    })
    setTimeout(function () {
      that.filter()
    }, 1)
  }
  
  formChange = (value) => {
    this.setState({
      value,
    });
  };
  
  render() {
    
    return (
      <IceFormBinderWrapper
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="20" style={styles.formRow}>
          <Col l="4">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>表达式类型：</span>
              <IceFormBinder name="s_type" triggerType="onBlur">
                <Select name="s_type"
                  dataSource={this.props.dictstore.PolicyExpTypeDS}
                  placeholder="请选择"
                  size="small"
                  autoWidth={false}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="s_type" />
              </div>
            </div>
          </Col>
          <Col l="4">
            <div style={styles.formItem}>
              <Button onClick={this.filter.bind(this)} type="primary" size="small" >
                查询
              </Button>
              <Button onClick={this.reset.bind(this)} type="normal" size="small" style={styles.submitButton}>
                重置
              </Button>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formItemRight: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
    float: 'right'
  },
  formComponent: {
    width: '150px',
  },
  formLabel: {
    minWidth: '70px',
  },
  submitButton: {
    marginLeft: '20px',
  },
};
